import { createComponentWithStore } from '../../../../store/helpers/component_creator.js';
import dayjs from 'dayjs';

// 状态颜色映射
const STATUS_COLORS = {
  1: '#ffa940', // 草稿
  2: '#52c41a', // 已发布
  3: '#1890ff', // 生产版本
  4: '#722ed1', // 客户确认版本
  5: '#ff4d4f'  // 已废弃
};

// 状态名称映射
const STATUS_NAMES = {
  1: '草稿',
  2: '已发布',
  3: '生产版本',
  4: '客户确认版本',
  5: '已废弃'
};

createComponentWithStore({
  /**
   * 组件的属性列表
   */
  properties: {
    // 版本数据
    versionData: {
      type: Object,
      value: null,
      observer: function(newVal) {
        if (newVal) {
          this._parseVersionData(newVal);
        }
      }
    },
    // 是否显示比较按钮
    showCompare: {
      type: Boolean,
      value: true
    },
    // 是否可以设置为当前版本
    showSetCurrent: {
      type: Boolean,
      value: true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    id: '',
    version: '',
    description: '',
    createTime: '',
    userName: '',
    status: 1,
    statusName: '草稿',
    statusColor: '#ffa940',
    isCurrent: false,
    tags: []
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 解析版本数据
     */
    _parseVersionData(data) {
      // 提取基本信息
      const version = data.VERSION || data.version || 'v1.0.0';
      const description = data.VERSION_DESC || data.description || '';
      const createTime = data.CREATE_TIME || data.createTime || 0;
      const userName = data.CREATOR_NAME || data.userName || '';
      const status = data.VERSION_STATUS || data.status || 1;
      const isCurrent = data.IS_CURRENT === 1 || data.isCurrent === true;
      const tags = data.TAGS || data.tags || [];
      
      // 格式化时间
      const formatTime = createTime 
        ? dayjs.unix(createTime).format('YYYY-MM-DD HH:mm')
        : '';
        
      // 设置状态名称和颜色
      const statusName = STATUS_NAMES[status] || '未知';
      const statusColor = STATUS_COLORS[status] || '#999999';
      
      this.setData({
        id: data._id,
        version,
        description,
        createTime: formatTime,
        userName,
        status,
        statusName,
        statusColor,
        isCurrent,
        tags
      });
    },
    
    /**
     * 点击整个卡片
     */
    onTap() {
      this.triggerEvent('tap', { id: this.data.id });
    },
    
    /**
     * 点击查看详情
     */
    onViewTap() {
      this.triggerEvent('view', { id: this.data.id });
    },
    
    /**
     * 点击比较
     */
    onCompareTap() {
      this.triggerEvent('compare', { id: this.data.id, version: this.data.version });
    },
    
    /**
     * 点击设置为当前版本
     */
    onSetCurrentTap() {
      this.triggerEvent('setcurrent', { id: this.data.id });
    }
  }
}); 